<template>
	<section>
		<el-row  :gutter="20">
			<el-col :span="20"  :offset="2" style="margin-top: 50px;">
					<el-form :model="addcourse" label-width="80px" :rules="addcourserule" ref="addcourse" >
					  <el-form-item label="课程名称" prop="name">
					    <el-input v-model="addcourse.name"></el-input>
					  </el-form-item>	
					  <el-form-item label="课程简介"  label-width="80px">
					        <div class="edit_container">
					          <quill-editor
					          				v-model="addcourse.intro"
					                        ref="myQuillEditor"
					                        class="editer"
					                       >
					          </quill-editor>
					        </div>
					  </el-form-item>	
					  <el-form-item label="上课组数" prop="teamCount">
					    <el-select v-model="addcourse.teamCount" placeholder="上课组数">
					      <el-option label="1" value="1"></el-option>
					      <el-option label="2" value="2"></el-option>
					      <el-option label="3" value="3"></el-option>
					      <el-option label="4" value="4"></el-option>
					      <el-option label="5" value="5"></el-option>
					      <el-option label="6" value="6"></el-option>
					    </el-select>
					  </el-form-item>
					  <el-form-item label="上课人数" prop="personCount">
					    <el-select v-model="addcourse.personCount" placeholder="上课人数">
					      <el-option label="6" value="6"></el-option>
					      <el-option label="12" value="12"></el-option>
					      <el-option label="18" value="18"></el-option>
					      <el-option label="24" value="24"></el-option>
					      <el-option label="30" value="30"></el-option>
					    </el-select>
					  </el-form-item>
					  <el-form-item label="自由申请" prop="isFree">
					    <el-radio-group v-model="addcourse.isFree">
					      <el-radio label="1">是</el-radio>
					      <el-radio label="0">否</el-radio>
					    </el-radio-group>
					  </el-form-item>		
					  <el-form-item label="上传文件" v-if="addcourse.isFree==0">
						<el-upload
						  class="upload-demo"
						  drag
						  action="cc"
						  :before-upload="beforeupload"
						  :file-list="fileList"
						  limit='1'
						  accept="xls/*">
						  <i class="el-icon-upload"></i>
						  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
						  <div class="el-upload__tip" slot="tip">只能上传xlx文件</div>
						</el-upload>
				    	<a href="./static/img/用户模板.xls">
					    	<el-tag type="success">
							 	 点击下载文件模板
							</el-tag>
				    	</a>
					  </el-form-item>	
						<el-form-item label="课程开始时间"  label-width="120px">
						    <el-date-picker 
						      v-model="addcourse.startTime"
						      type="datetime"
						      placeholder="选择日期时间">
						    </el-date-picker>	
						</el-form-item>
					</el-form>	
			</el-col>
		  <el-col :span="12" :offset="10" style="margin-top: 50px;">			   
			<el-button @click="addCOU" type="success" >复制课程</el-button>
		  </el-col>			
		</el-row>
	
	</section>
</template>  

<script>
  import {coursecopy,coursenamerule} from '../../api/api'
  import { quillEditor } from 'vue-quill-editor' //调用设置器
  import ComFunJS from '../../common/js/util'
  export default {
    data() {  	
		let numberrule=(rule, value, callback)=>{
		  if (value < 0 || value > 100) {
		    callback(new Error('数值必须在 0 至 100之间'))
		  } else {
		    callback()
		  }							
		}    
		var courserule=(rules,value,callback)=>{
			let params={name:this.addcourse.name};
			coursenamerule(params).then((r)=>{
				if(!r){
					callback(new Error('课程名称重复'))
				}else{
					callback()
				}
			})
		}			
      return {
        active: 0,
        step:1,
		fileList:[],
        addcourse: {
          name: '',
          intro: '',
          teamCount:'',
          personCount:'',
          
          isFree:"1",
          startTime:"",
        },
        addcourserule:{
 			name:[
				{ required: true, message: '课程名称不能为空', trigger: 'blur' },
				{validator:courserule,trigger: 'blur'},
			], 
			intro:[
				{ required: true, message: '课程简介不能为空', trigger: 'blur' }
			], 
			teamCount:[
				{ required: true, message: '上课组数不能为空', trigger: 'blur' }
			], 
			personCount:[
				{ required: true, message: '上课人数不能为空', trigger: 'blur' }
			], 	
			isFree:[
				{ required: true, message: '请选择学生申请方式', trigger: 'blur' }
			],	
			startTime:[
				{ required: true, message: '开始时间不能为空', trigger: 'blur' }
			],	
        },
		param:"",
      }
   },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill
      }
    },    
    components: {
      quillEditor
    }, 	
    watch:{
    	'addcourse.teamCount':function(){
    		this.addcourse.personCount=JSON.stringify(parseInt(this.addcourse.teamCount)*6)
    	},
     	'addcourse.personCount':function(){
    		this.addcourse.teamCount=JSON.stringify(parseInt(this.addcourse.personCount)/6)
    	}, 
    },	
    methods: {
		    skip(link,id,type){
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:id,
		        			type:type
		        		}
		        	}
		        )
		    },	    	
            beforeupload(file) {
                //创建临时的路径来展示图片
                var windowURL = window.URL || window.webkitURL;
                var planname=file.name;
                let oneplan={name:planname,url:''};
                this.fileList=[];
                this.fileList.push(oneplan);
                //重新写一个表单上传的方法
                this.param = new FormData();
                this.param.append('file', file, file.name);
                return false;
            },	       	
			//新增
			addCOU: function () {
				var _this=this;
				if(_this.addcourse.isFree==0&&_this.fileList.length==0){
					_this.$message({
						message: '请上传文件',
						type: 'error'
					});			
					return;
				}
				if(_this.addcourse.isFree==1){
					_this.param=new URLSearchParams()
				}			
				this.$refs.addcourse.validate((valid)=>{
					if(valid){
						this.param.append('courseId',this.$route.query.id);
						this.param.append('name',this.addcourse.name);
						this.param.append('intro',this.addcourse.intro);
						this.param.append('teamCount',this.addcourse.teamCount);
						this.param.append('personCount',this.addcourse.personCount);
						this.param.append('isFree',this.addcourse.isFree);
						this.param.append('startTime',ComFunJS.getNowDate('yyyy-MM-dd HH:mm',this.addcourse.startTime));
						this.$confirm('确认提交吗？', '提示', {}).then(() => {
							coursecopy(this.param).then((r) => {
								if(!r.error){
									this.addLoading = false;
									this.$message({
										message: '课程复制成功',
										type: 'success'
									});
									this.skip('/schedulelist')
								}else{
									this.$message({
										message:r.message,
										type: 'error'
									});										
								}
							})
						});						
					}
				})
			},			
			//设置
			editSubmit: function () {
				this.$refs.edittemplet.validate((valid)=>{
					if(valid){
						this.edittemplet.videoIds=this.edittemplet.videoIds.join(',');
						this.edittemplet.problemIds=this.edittemplet.problemIds.join(',');
						this.edittemplet.drawingIds=this.edittemplet.drawingIds.join(',');
						this.edittemplet.planIds=this.edittemplet.planIds.join(',');
						if(this.courseType=='basis'){
							this.edittemplet.type=1;
							this.basis[this.editIndex]=this.edittemplet;	
							var updatebas=this.basis;
							this.basis=updatebas;	
							console.log(this.basis)
						}else{
							this.edittemplet.type=2;
							this.casebox[this.editIndex]=this.edittemplet;	
							var updatebas=this.casebox;
							this.casebox=updatebas;						
						}
						this.editFormVisible=false;		
						this.$message({
							type: 'success',
							message: '更新成功'		
						});	
					}
				})

			},					
    	addraw:function(){
    		var _this=this;
			if(_this.derive.length>0){
				var pass=0
				$.each(_this.testdrawlist, function(i,result) {
					$.each(_this.derive, function(e,value) {
						if(result.name!=value.name){		
							pass=1;
						}else{
							pass=0;
							return false;
						}
					});
					if(pass==1){
						_this.derive.push(result);							
					}					
				});
			}else{
				_this.derive=_this.testdrawlist;
			}   	
			this.drawFormVisible=false;
    	},
	    addtemplebox:function(value,type){
			this.templet={
				total:'',
				page:'1',
				pagesize:'10',	
				isShared:' ',
				isSelf:'1',
				templettype:"1",
				courseStage:value,
				key:""
			};
			this.courseType=type;
			this.getList();
			this.getbussinesslist();
			this.addFormVisible=true;

		},
		drawSelectionChange:function(value){
			this.testdrawlist=value;
		},		
		handleSelectionChange:function(value){
			this.testlist=value;
		},
		swapItems:function(arr, index1, index2) {
	        arr[index1] = arr.splice(index2, 1, arr[index1])[0];
	        return arr;
	    }, 		
		upRecord:function(arr, $index) {
	        if($index == 0) {
	            return;
	        }
	        this.swapItems(arr, $index, $index - 1);
		},
		downRecord:function(arr, $index) {
	        if($index == arr.length -1) {
	            return;
	        }
	        this.swapItems(arr, $index, $index + 1);
    	},	
    	deletelist:function(type,$index){
    		var _this= this;
			_this.$confirm('确认删除该记录吗?', '提示', {
		        confirmButtonText: '确定',
		        cancelButtonText: '取消',					
				type: 'warning'
			}).then(() => {
				if(type=='basis'){
					_this.basis.splice($index,1)
				};
				if(type=='case'){
					_this.casebox.splice($index,1)
				}
				if(type=='draw'){
					_this.derive.splice($index,1)
				}					
			})    		
    	},
		addList:function(type){
			var _this=this;
			if(_this.testlist.length==0){
				_this.$message({
					type: 'error',
					message: '请选择小节'		
				});	
				return;
			}
			if(_this.courseType=='basis'){
				if(_this.basis.length>0){
					var pass=0
					$.each(_this.testlist, function(i,result) {
						result.type=1;
						$.each(_this.basis, function(e,value) {
							if(result.templetId!=value.templetId){		
								pass=1;
							}else{
								pass=0;
								return false;
							}
						});
						if(pass==1){
							_this.basis.push(result);							
						}					
					});
				}else{
					$.each(_this.testlist, function(i,result) {
						result.type=1;				
					});					
					_this.basis=_this.testlist;
				}
			}
			if(_this.courseType=='case'){
				if(_this.casebox.length>0){
					var pass=0
					$.each(_this.testlist, function(i,result) {
						result.type=2;
						$.each(_this.casebox, function(e,value) {
							if(result.templetId!=value.templetId){		
								pass=1;
							}else{
								pass=0;
								return false;
							}
						});
						if(pass==1){
							_this.casebox.push(result);							
						}					
					});
				}else{
					$.each(_this.testlist, function(i,result) {
						result.type=2;				
					});						
					_this.casebox=_this.testlist;
				}
			}						
			_this.$message({
				type: 'success',
				message: '添加成功'		
			});	
			_this.testlist=[];
			_this.addFormVisible = false;
		},
		handleCurrentChange(val) {
			this.page = val;
			this.getList();
		},			
		getbussinesslist:function(){
			bussinesslist().then((res)=>{

				this.bussinessList=res;
			})
		},			
		getList: function () {
			this.loading = true;
			//NProgress.start();
			if(this.templet.templettype!=3){
				let params={pageNum:this.templet.page,businessModelId:this.templetbusinessModelId,pageSize:this.templet.pagesize,courseStage:this.templet.courseStage,key:this.templet.key,isShared:this.templet.isShared,isSelf:this.templet.isSelf};
				templetlist(params).then((res) => {
					this.templet.total=res.total;		
					this.Lists = res.list;
					this.loading = false;
				});					
			}else{
				let params={pageNum:this.page,pageSize:this.pagesize,businessModelId:this.templetbusinessModelId,key:this.key,courseStage:this.templet.courseStage,};
				templetlistbuil(params).then((res) => {
					this.total=res.total;					
					this.Lists = res.list;
					this.loading = false;
				});					
			}
		},		
   },
	mounted() {

	}    
  }
</script>


<style>
	.box-content{
		margin-bottom: 10px;
	}
	.text-item{
		padding: 10px 15px;
	}
	.text-box{
		margin-bottom: 5px;
	}
	.card-margin{
		margin-bottom: 20px;
	}
	.dateformdate{
		width: 30%;
	}
</style>